<template>
  <div id="app">
    <h2 id="h2">基本使用</h2>
    <button id="btn1" @click="axiosGet">发送GET请求</button>
    <button id="btn2" @click="axiosPost">发送POST请求</button>
    <button id="btn3" @click="axiosPut">发送PUT请求</button>
    <button id="btn4" @click="axiosDelete">发送DELETE请求</button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'App',
  methods:{
    //GET请求（获取数据）
    axiosGet:function(){
      //axios()
      axios.request({
        method:"GET",
        url:"http://localhost:3000/comments"
      }).then(
        response=>{
          console.log("response",response.data);
          console.log(response);
        },
        error=>{
          console.log("error",error.message);
        }
      )
    },
    //POST请求（增加数据）
    axiosPost:function(){
      //axios(url,data,config)
      axios.post("http://localhost:3000/comments",
      {
        "body":"喜大普奔",
        "postId":2
      }).then(
        response=>{
          console.log("response",response.data);
        },
        error=>{
          console.log("error",error.message);
        }
      );
    },
    //其余的类似
  }  
}
</script>

<style>
  button{
    margin-left: 5px;
  }
  #btn1{
    background-color: skyblue;
  }
  #btn2{
    background-color: orange;
  }
  #btn3{
    background-color: green;
  }
  #btn4{
    background-color: red;
  }
</style>
